<template>

  <div class="house">

    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin/base/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>基本信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>房屋管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-card>
      <el-container>

        <el-header style="border: 1px solid #e2e2e2;height: 100px">

          <el-form style="width:920px;height: 70px;margin: 30px 0 0 0" v-model="formsearch">

            <el-form-item>
              楼层
              <el-select style="width: 300px;margin: 0 20px" v-model="formsearch.room1">
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
                <el-option label="4" value="4"></el-option>
                <el-option label="5" value="5"></el-option>
                <el-option label="6" value="6"></el-option>
                <el-option label="7" value="7"></el-option>
                <el-option label="8" value="8"></el-option>
                <el-option label="9" value="9"></el-option>
              </el-select>
              房号
              <el-select style="width: 300px;margin: 0 20px" v-model="formsearch.room2">
                <el-option label="01" value="01"></el-option>
                <el-option label="02" value="02"></el-option>
                <el-option label="03" value="03"></el-option>
                <el-option label="04" value="04"></el-option>
                <el-option label="05" value="05"></el-option>
                <el-option label="06" value="06"></el-option>
                <el-option label="07" value="07"></el-option>
                <el-option label="08" value="08"></el-option>
                <el-option label="09" value="09"></el-option>
                <el-option label="10" value="10"></el-option>
              </el-select>


              <el-button icon="el-icon-search" @click="search()">搜索</el-button>

            </el-form-item>


          </el-form>


        </el-header>


        <el-main style="height: 100%;border:1px solid  #e2e2e2;margin: 10px 0 0 0">
          <el-container>

            <el-header style="padding: 0;height: 30px">

              <div style="width: 170px;padding: 0;float: left">

                <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
                <el-button type="warning" @click="deletes()">删除</el-button>

                <el-dialog title="添加房屋" :visible.sync="dialogFormVisible">

                  <el-form :model="form">

                    <!--                    <el-form-item label="ID" :label-width="formLabelWidth">-->
                    <!--                      <el-input v-model="form.id" autocomplete="off"></el-input>-->
                    <!--                    </el-form-item>-->

                    <el-form-item label="楼层" :label-width="formLabelWidth">
                      <el-select style=";" v-model="addroom.room1">
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                        <el-option label="5" value="5"></el-option>
                        <el-option label="6" value="6"></el-option>
                        <el-option label="7" value="7"></el-option>
                        <el-option label="8" value="8"></el-option>
                        <el-option label="9" value="9"></el-option>
                      </el-select>
                      房号
                      <el-select style=";" v-model="addroom.room2">
                        <el-option label="01" value="01"></el-option>
                        <el-option label="02" value="02"></el-option>
                        <el-option label="03" value="03"></el-option>
                        <el-option label="04" value="04"></el-option>
                        <el-option label="05" value="05"></el-option>
                        <el-option label="06" value="06"></el-option>
                        <el-option label="07" value="07"></el-option>
                        <el-option label="08" value="08"></el-option>
                        <el-option label="09" value="09"></el-option>
                        <el-option label="10" value="10"></el-option>
                      </el-select>

                    </el-form-item>


                    <el-form-item label="面积" :label-width="formLabelWidth">

                      <el-select v-model="form.area" style="width: 90%;">
                        <el-option label="500平方米" value="500平方米"></el-option>
                        <el-option label="800平方米" value="800平方米"></el-option>
                        <el-option label="1200平方米" value="1200平方米"></el-option>
                        <el-option label="1500平方米" value="1500平方米"></el-option>
                      </el-select>
                    </el-form-item>


                    <el-form-item label="入住时间" :label-width="formLabelWidth">

                      <el-date-picker
                          v-model="form.time"
                          type="date"
                          placeholder="选择日期" style="width: 90%;">
                      </el-date-picker>


                    </el-form-item>


                    <el-form-item label="状态" :label-width="formLabelWidth">
                      <el-select v-model="form.state" style="width: 90%;">
                        <el-option label="入住" value="入住"></el-option>
                        <el-option label="未入住" value="未入住"></el-option>
                      </el-select>
                    </el-form-item>


                    <el-form-item :label-width="formLabelWidth" style="width:350px;display:block;margin: 0 auto">


                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="add()">确 定</el-button>

                    </el-form-item>

                  </el-form>


                </el-dialog>

              </div>

              <div style="width: 344px;padding: 0;float:right;">


                <el-tooltip content="刷新" placement="bottom">
                  <el-button icon="el-icon-refresh-left" style="margin: 0 0 0 10px" @click="reFresh()"></el-button>
                </el-tooltip>
                <el-tooltip content="筛选" placement="bottom">
                  <el-popover
                      placement="bottom"
                      trigger="click">
                    <template>
                      <el-checkbox v-model="b1" style="display: block">序号</el-checkbox>
                      <el-checkbox v-model="b2" style="display: block">房间号</el-checkbox>
                      <el-checkbox v-model="b3" style="display: block">面积</el-checkbox>
                      <el-checkbox v-model="b4" style="display: block">入住时间</el-checkbox>
                      <el-checkbox v-model="b5" style="display: block">状态</el-checkbox>

                    </template>
                    <el-button slot="reference" icon="el-icon-menu" style="margin: 0 0 0 10px"></el-button>
                  </el-popover>
                </el-tooltip>
                <el-tooltip content="导出" placement="bottom">
                  <el-button icon="el-icon-folder-opened" style="margin: 0 0 0 10px"></el-button>
                </el-tooltip>
                <el-tooltip content="打印" placement="bottom">
                  <el-button icon="el-icon-printer"></el-button>
                </el-tooltip>
                <el-tooltip content="Top center" placement="bottom">
                  <el-button icon="el-icon-warning-outline"></el-button>
                </el-tooltip>


              </div>

            </el-header>

            <el-main>

              <el-table
                  v-loading="loading"
                  ref="multipleTable"
                  tooltip-effect="dark"
                  @selection-change="handleSelectionChange"
                  :data="tableData"
                  height="400"
                  style="width: 100%">

                <el-table-column
                    type="selection"
                    width="100">
                </el-table-column>
                <el-table-column
                    v-if="b1"
                    type="index"
                    label="序号"
                    sortable
                    width="200">
                </el-table-column>
                <el-table-column
                    v-if="b2"
                    prop="room"
                    label="房间号"
                    sortable
                    width="200">
                </el-table-column>
                <el-table-column
                    v-if="b3"
                    prop="area"
                    label="面积"
                    sortable
                    width="200">
                </el-table-column>
                <el-table-column
                    v-if="b4"
                    prop="time"
                    label="入住时间"
                    sortable
                    width="200">
                </el-table-column>
                <el-table-column
                    v-if="b5"
                    prop="state"
                    label="状态"
                    sortable
                    width="325">
                </el-table-column>

                <el-table-column
                    label="操作"
                    width="200">
                  <template slot-scope="scope">

                    <el-button type="primary" style="text-align: center" size="mini"
                               @click="selectUser(scope.row)">编辑
                    </el-button>
                    <el-popconfirm style="margin: 0 0 0 10px"
                                   title="这是一段内容确定删除吗？"
                                   @confirm="deleteRow(scope.$index,scope.row)"
                    >
                      <el-button slot="reference" type="warning" size="mini">删除</el-button>
                    </el-popconfirm>

                  </template>


                </el-table-column>


              </el-table>
              <template>
                <div class="block">
                  <el-pagination
                      background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="paginations.page_index"
                      :page-sizes="paginations.page_sizes"
                      :page-size="paginations.page_size"
                      :total="paginations.total"
                      layout="total, sizes, prev, pager, next, jumper"
                  >
                  </el-pagination>
                </div>
              </template>

              <el-dialog title="编辑房屋" :visible.sync="dialogFormVisible1">

                <el-form :model="form">
                  <!--                  <el-form-item label="ID" :label-width="formLabelWidth">-->
                  <!--                    <el-input v-model="form.id" autocomplete="off" disabled></el-input>-->
                  <!--                  </el-form-item>-->

                  <el-form-item label="楼层" :label-width="formLabelWidth">
                    <el-select style=";" v-model="addroom.room1">
                      <el-option label="1" value="1"></el-option>
                      <el-option label="2" value="2"></el-option>
                      <el-option label="3" value="3"></el-option>
                      <el-option label="4" value="4"></el-option>
                      <el-option label="5" value="5"></el-option>
                      <el-option label="6" value="6"></el-option>
                      <el-option label="7" value="7"></el-option>
                      <el-option label="8" value="8"></el-option>
                      <el-option label="9" value="9"></el-option>
                    </el-select>
                    房号
                    <el-select style=";" v-model="addroom.room2">
                      <el-option label="01" value="01"></el-option>
                      <el-option label="02" value="02"></el-option>
                      <el-option label="03" value="03"></el-option>
                      <el-option label="04" value="04"></el-option>
                      <el-option label="05" value="05"></el-option>
                      <el-option label="06" value="06"></el-option>
                      <el-option label="07" value="07"></el-option>
                      <el-option label="08" value="08"></el-option>
                      <el-option label="09" value="09"></el-option>
                      <el-option label="10" value="10"></el-option>
                    </el-select>

                  </el-form-item>


                  <el-form-item label="面积" :label-width="formLabelWidth">

                    <el-select v-model="form.area" style="width: 90%;">
                      <el-option label="500平方米" value="500平方米"></el-option>
                      <el-option label="800平方米" value="800平方米"></el-option>
                      <el-option label="1200平方米" value="1200平方米"></el-option>
                      <el-option label="1500平方米" value="1500平方米"></el-option>
                    </el-select>
                  </el-form-item>


                  <el-form-item label="入住时间" :label-width="formLabelWidth">

                    <el-date-picker
                        v-model="form.time"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>

                  </el-form-item>


                  <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-select v-model="form.state" style="width: 90%;">
                      <el-option label="入住" value="入住"></el-option>
                      <el-option label="未入住" value="未入住"></el-option>
                    </el-select>
                  </el-form-item>


                  <el-form-item :label-width="formLabelWidth" style="width:350px;display:block;margin: 0 auto">

                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="edit()">确 定</el-button>

                  </el-form-item>

                </el-form>

              </el-dialog>


            </el-main>


          </el-container>


        </el-main>


      </el-container>
    </el-card>

  </div>

</template>

<script>

export default {

  data() {
    return {
      houseArr: [],
      loading: true,
      checked: true,
      b1: true,
      b2: true,
      b3: true,
      b4: true,
      b5: true,

      multipleSelection: [],

      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',

      dialogFormVisible1: false,
      dialogTableVisible1: false,
      formLabelWidth1: '120px',

      formsearch: {
        room1: "",
        room2: "",
      },
      addroom: {
        room1: "",
        room2: "",
      },

      form: {
        id: '',
        room: '',
        area: '',
        time: "",
        state: "",
      },

      tableData: [],


      paginations: {
        page_index: 1, //当前页
        total: 10, //总数
        page_size: 5, //一页显示多少
        page_sizes: [5, 10, 15, 20], //每页显示多少条
      },

    }
  },

  created: function () {
    this.select();
    this.houseArrys();
  },

  methods: {
    //分页查询改变每页条数方法
    handleSizeChange(val) {
      this.paginations.page_size = val;
      console.log(`每页 ${this.paginations.page_size} 条`);
      this.loadCompliant(this.paginations.page_size, this.paginations.page_index);
    },
    handleCurrentChange(val) {
      this.paginations.page_index = val;
      console.log(`当前页: ${this.paginations.page_index}`);
      this.loadCompliant(this.paginations.page_size, this.paginations.page_index);
    },
    loadCompliant(page_size, page_index) {

      let token = localStorage.getItem("accessToken");
      this.axios.get(`http://localhost:8080/house/get/page/${page_index}/${page_size}`, {header: {"Authentication": "Bearer " + token}}).then((response) => {
        this.tableData = response.data.list
        this.paginations.total = response.data.totalCount
      })
    },


    houseArrys() {
      let token = localStorage.getItem("accessToken");
      this.axios.post("http://localhost:8080/house/houses", {header: {"Authentication": "Bearer " + token}}).then((response) => {
        this.houseArr = response.data;

      });

    },


    reFresh() {
      this.select();
    },
    select() {
      let token = localStorage.getItem("accessToken");
      this.axios.post("http://localhost:8080/house/search/select/list", {header: {"Authentication": "Bearer " + token}}).then((response) => {
        this.loading = false
        this.tableData = response.data;

      })
    },

    search() {
      let token = localStorage.getItem("accessToken");
      let room = this.formsearch.room1 + this.formsearch.room2

      this.axios.get("http://localhost:8080/house/search/select/" + room, {header: {"Authentication": "Bearer " + token}}).then((response) => {
        this.tableData = response.data;
      })
    },
    add() {
      let token = localStorage.getItem("accessToken");
      this.form.room = this.addroom.room1 + this.addroom.room2
      this.dialogFormVisible = false
      this.axios.post("http://localhost:8080/house/add/insert", this.form, {header: {"Authentication": "Bearer " + token}}).then((response) => {

        if (response.data == 1) {
          this.$message.success('添加房间成功')
        } else {
          this.$message.error('添加房间重复')
        }


        this.select();
      })

    },
    selectUser(row) {
      let token = localStorage.getItem("accessToken");
      this.dialogFormVisible1 = true
      this.axios.post("http://localhost:8080/house/edit/select", row, {header: {"Authentication": "Bearer " + token}}).then((response) => {
        this.form = response.data;
        this.addroom.room1 = this.form.room.charAt(0)
        this.addroom.room2 = this.form.room.charAt(1) + this.form.room.charAt(2)

      })
    },
    edit() {
      let token = localStorage.getItem("accessToken");
      this.form.room = this.addroom.room1 + this.addroom.room2
      this.dialogFormVisible1 = false
      this.axios.post("http://localhost:8080/house/edit/update", this.form, {header: {"Authentication": "Bearer " + token}}).then((response) => {
        this.$message.success("编辑房屋成功")
        this.select();
      })

    },
    deleteRow(index, row) {
      let token = localStorage.getItem("accessToken");
      this.axios.post("http://localhost:8080/house/user/delete", row, {header: {"Authentication": "Bearer " + token}}).then((response) => {
        this.$message.success("删除房屋成功")
        this.selectel();
      })

    },
    deletes() {
      let token = localStorage.getItem("accessToken");
      this.axios.post("http://localhost:8080/house/users/delete", this.multipleSelection, {header: {"Authentication": "Bearer " + token}}).then((response) => {
        if (response.data == 1) {
          this.$message.success("删除房屋成功")
        } else {
        }
        this.select();
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }

}

</script>